<template>
    <van-nav-bar title="地址" left-text="返回" left-arrow @click-left="$router.go(-1)" />

    <!-- 新增地址 -->
    <van-address-list switchable v-model="chosenAddressId" :list="listArr" :disabled-list="disabledListArr"
        disabled-text="以下地址超出配送范围" default-tag-text="默认" @add="onAdd" @edit="onEdit" default=""/>
    <!-- 地址编辑 -->
    <van-action-sheet v-model:show="isAddShow">
        <van-address-edit v-for="item in listArr" :key="item.addressid" :area-list="areaList" show-delete show-set-default show-search-result
            :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
            @delete="onDelete(item.addressid)" @change-detail="onChangeDetail" />
    </van-action-sheet>

    <van-action-sheet v-model:show="isDeleteShow">
        <van-address-edit :area-list="areaList" show-delete show-set-default show-search-result
            :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
            @cancel="onDelete" @change-detail="onChangeDetail" delete-button-text="取消"/>
    </van-action-sheet>
</template>
  
<script setup lang="ts">
import { areaList } from '@vant/area-data';
import { ref } from 'vue'
import { showToast } from 'vant';
import type { AddressEditSearchItem, AddressEditInfo } from 'vant'
import { showNotify, closeNotify } from 'vant';
import { addAddress, getDefaultAddress, updateAddress, getAllAddress, deleteAddress } from '@/api/address';
import type { addressItem, disabledItem } from '@/types/addressType'
const isAddShow = ref<boolean>(false)
const isDeleteShow=ref<boolean>(false)
const chosenAddressId = ref('1');
// 消息提示
showNotify({
    message: '地址列表',
    color: 'white',
    background: '#58be6a',
    duration: 1000,
});
// 地址列表
const listArr = ref<Array<addressItem>>([])




// 不可配送地址
const disabledListArr = ref<Array<disabledItem>>([])


//详细地址搜索结果
const searchResult = ref<Array<AddressEditSearchItem>>([]);

const ids = ref(1)
// 点击添加
const onAdd = () => {
    showToast('新增地址')
    isDeleteShow.value = true
};
// 
// 点击编辑
const onEdit = () => {
    isDeleteShow.value = true
};
const onSave = (info: AddressEditInfo) => {
    console.log('info', info);

    addAddress({
        userid: String(ids.value),
        name: info.name,
        tel: info.tel,
        province: info.province,
        city: info.city,
        county: info.county,
        addressDetail: info.addressDetail,
        isDefault: Boolean(info.isDefault),
    }).then(res => {
        console.log('addAddress', res);
        listArr.value.push(info as any)
        console.log(listArr.value);
        ids.value++
    })
    isAddShow.value = false
    getListDataFn();
};
// var info = ref<Array<AddressEditInfo>>([])
const onDelete = (addressid: string) => {
    deleteAddress({ addressid }).then(res => {
        console.log('deleteRes', res);
        isAddShow.value = false
        getListDataFn();
    })
};
const onChangeDetail = () => {

};

const getListDataFn = () => {
    getAllAddress({ userid: String(ids.value) }).then(res => {
        console.log('listData', res);
        listArr.value = res.data.data

    })
}
getListDataFn()








</script>
   
<style scoped lang="scss"></style>